<!doctype html>
<html>
<head>
      <meta charset="utf-8">
	  <style type="text/css">
	       *{padding: 0; margin: 0;}
        #box {
            width: 500px; height: 300px;
            position: relative;
            margin : 100px auto;
        }
        #box img{
            width: 500px; height: 300px;
            position: absolute; left: 0; top: 0;
            display : none;
        }
        #box img.show {
            display : block;
        }
        #nav {
            width: 100px; height: 30px;
            position: absolute; right: 10px; bottom: 10px;
        }
        #nav a {
            text-decoration: none;
            display : inline-block;
            width: 20px; height: 20px;
            color : black;
            text-align: center;
            line-height: 20px;
            float:left;
            border : 1px solid black;
            margin : 0 0 0 2px;
        }
        #nav a.active {
            background: #f00;
        }
	  </style>
</head>
<body>
          <div id="box">
		       <img src="img/03.jpg" class="show">
			   <img src="img/04.jpg">
			   <img src="img/05.jpg">
			   <img src="img/06.jpg">
			   <div id="nav">
			      <a href="javascript:;" class="active">1</a>
				  <a href="javascript:;">2</a>
				  <a href="javascript:;">3</a>
				  <a href="javascript:;">4</a>
			   </div>
		  </div>
</body>
</html>
<script>
           window.onload=function(){
		    var box=document.getElementById("box");
			var imgs=document.getElementsByTagName("img");
			//console.log(imgs);
			var As=document.getElementsByTagName("a");
			
			var index=0;
			
			function move(){
			    index++;
				if(imgs.length<=index){
				  index=0;
				}
				
				showImg(index);
				setNave(index);
			}
		   
		   var time=setInterval(move,2000);
		   
		   function showImg(leo){
		      for(var i=0;i<imgs.length;i++){
			     imgs[i].removeAttribute("class");
			  }
			  imgs[leo].className="show";
		   }
		   
		   
		   
		   function setNave(leo){
		       for(var i=0;i<As.length;i++){
			      As[i].removeAttribute("class");
			   }
			   As[leo].className="active";
		   }
		   
	 }
</script>